<template>
  <el-splitter layout="vertical" style="overflow: hidden" @collapse="delayResize()"
               @resize="delayResize()">
    <el-splitter-panel :collapsible="true" size="60px">
      <Header class="header"></Header>
    </el-splitter-panel>

    <el-splitter-panel class="main">
      <el-splitter @collapse="delayResize()" @resize="delayResize()">
        <el-splitter-panel :collapsible="true" size="20%">
          <div ref="sidebarLeftRef" class="sidebarLeftRef">

          </div>
        </el-splitter-panel>
        <el-splitter-panel size="60%">
          <div ref="viewRef" class="viewRef">

          </div>
        </el-splitter-panel>
        <el-splitter-panel :collapsible="true" size="20%">
          <div ref="sidebarRightRef" class="sidebarRightRef">
            <span>a: {{ position }}</span>

          </div>
        </el-splitter-panel>
      </el-splitter>
    </el-splitter-panel>

    <el-splitter-panel :collapsible="true" size="120px">
      <Footer class="footer"></Footer>
    </el-splitter-panel>
  </el-splitter>
</template>

<script lang="ts" setup>
import {computed, nextTick, onMounted, ref, type Ref} from "vue";
import Header from "~/components/Header.vue";
import Footer from "~/components/Footer.vue";
import {SceneManager} from "~/utils/manager/scene/SceneManager.ts";
import {PlayerManager} from "~/utils/manager/player/PlayerManager.ts";
import {EventManager} from "~/utils/manager/EventManager.ts";
import {Light} from "~/utils/manager/scene/module/Light.ts";
import {TransformController} from "~/utils/manager/scene/controller/TransformController.ts";

const viewRef = ref<HTMLDivElement>()
const sidebarLeftRef = ref<HTMLDivElement>()
const sidebarRightRef = ref<HTMLDivElement>()
const eventManager = new EventManager()
const sceneManager = new SceneManager(viewRef as Ref<HTMLDivElement>, eventManager)
const playerManager = new PlayerManager(sceneManager, eventManager)

const chooseObject = ref<THREE.Object3D | null>();
const position = computed(() => chooseObject.value?.position);

function delayResize() {
  nextTick(() => {
    sceneManager.resize();
  })
}

onMounted(async () => {
  sceneManager.init()
  sceneManager.setCamera(playerManager.Player.camera)
  sceneManager.pushFunction(playerManager.update.bind(playerManager))

  await playerManager.bindWindowEvent();

  sceneManager.run();

  const ambientLight = new Light('ambient')
  const directionalLight = new Light('directional')

  sceneManager.addObject(ambientLight.lightObject)
  sceneManager.addObject(directionalLight.lightObject)

  window.addEventListener('resize', () => {
    sceneManager.resize();
  })

  TransformController.addChooseCallback(() => {
    chooseObject.value = TransformController.CHOOSE_OBJECT;
  })

  setTimeout(() => {
    sceneManager.resize();
  })

})
</script>

<style scoped src="~/app.css"></style>